@mixin ballBackground($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: cover;
}

@mixin ballSize($scale) {
  width: $scale * 100px;
  height: $scale * 100px;
}

html, body {
  height: 100%;
}

body {
  height: 100%;
  background: #000c31;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(0.6);
}

.ball {
  position: absolute;
  border-radius: 50%;
}

.solar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  @include ballSize(5);
  perspective: 1000px;
  transition: all 4s ease;

  &:hover {
    transform: rotate3d(-1, 2, 2, 70deg);
    //transform: matrix(1, -0.2, 0, 1, 0, 0);
  }

  .sun {
    @extend .ball;
    width: 100px;
    height: 100px;
    @include ballBackground("../images/sun.png");
  }
  /* earth wrapper */
  .earth-wrapper {
    @extend .ball;
    @include ballSize(4);
    border: 1px solid #ddd;
    animation: roundBall 10s linear infinite;
    /* earth */
    .earth {
      @extend .ball;
      top: 30px;
      left: 30px;
      width: 50px;
      height: 50px;
      @include ballBackground("../images/earth.png");
      display: block;
      animation: roundBall 4s linear infinite;
      /* moon */
      .moon {
        @extend .ball;
        top: -5px;
        left: -5px;
        width: 10px;
        height: 10px;
        @include ballBackground("../images/moon.png");
        animation: roundBall 6s linear infinite;
      }
    }

  }
  /* venus */
  .venus {
    @extend .ball;
    @include ballSize(3);
    border: 1px solid #ddd;
    animation: roundBall 20s linear infinite;
    &::before {
      @extend .ball;
      top: 25px;
      left: 25px;
      content: '';
      width: 40px;
      height: 40px;
      @include ballBackground("../images/venus.png");
    }
  }
  /* mercury */
  .mercury {
    @extend .ball;
    @include ballSize(2);
    border: 1px solid #ddd;
    animation: roundBall 15s linear infinite;
    &::before {
      @extend .ball;
      top: 10px;
      left: 10px;
      content: '';
      width: 30px;
      height: 30px;
      @include ballBackground("../images/mercury.png");
    }
  }
  /* mars */
  .mars {
    @extend .ball;
    @include ballSize(5);
    border: 1px solid #ddd;
    animation: roundBall 15s linear infinite;
    &::before {
      @extend .ball;
      top: 55px;
      left: 55px;
      content: '';
      width: 30px;
      height: 30px;
      @include ballBackground("../images/mars.png");
    }
  }
  /* jupiter */
  .jupiter {
    @extend .ball;
    @include ballSize(6);
    border: 1px solid #ddd;
    animation: roundBall 8s linear infinite;
    &::before {
      @extend .ball;
      top: 55px;
      left: 55px;
      content: '';
      width: 60px;
      height: 60px;
      @include ballBackground("../images/jupiter.png");
    }
  }
  /* saturn */
  .saturn {
    @extend .ball;
    @include ballSize(7);
    border: 1px solid #ddd;
    animation: roundBall 5s linear infinite;
    &::before {
      @extend .ball;
      top: 70px;
      left: 70px;
      content: '';
      width: 60px;
      height: 60px;
      @include ballBackground("../images/saturn.png");
    }
  }
  /* uranus */
  .uranus {
    @extend .ball;
    @include ballSize(8);
    border: 1px solid #ddd;
    animation: roundBall 12s linear infinite;
    &::before {
      @extend .ball;
      top: 90px;
      left: 90px;
      content: '';
      width: 60px;
      height: 60px;
      @include ballBackground("../images/uranus.png");
    }
  }
  /* neptunus */
  .neptunus {
    @extend .ball;
    @include ballSize(9);
    border: 1px solid #ddd;
    animation: roundBall 18s linear infinite;
    &::before {
      @extend .ball;
      top: 90px;
      left: 90px;
      content: '';
      width: 60px;
      height: 60px;
      @include ballBackground("../images/neptune.png");
    }
  }
  /* pluto */
  .pluto {
    @extend .ball;
    @include ballSize(10);
    border: 1px solid #ddd;
    animation: roundBall 20s linear infinite;
    &::before {
      @extend .ball;
      top: 110px;
      left: 110px;
      content: '';
      width: 40px;
      height: 40px;
      @include ballBackground("../images/pluto.png");
    }
  }
}

@keyframes roundBall {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}